<template>
  <div v-if="songItem" class="song-container">
    <!-- 可以通过计算左上角的高度，来动态的设置这个容器的高度 -->
    <div class="mark"></div>
    <div class="blurBgMask"></div>
    <div class="lyric-region">
      <div class="lyric-wrapper">
        <SongImageComp />
        <Lyric
          :handled="handled"
          :songItem="songItem"
          :lyricArr="lyricArr"
          :currentTime="currentTime"
        />
      </div>
    </div>
    <PlayerBar :songItem="songItem" v-if="songItem.id !== undefined" />
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import PlayerBar from "../../components/PlayerBar";
import Lyric from "../../components/Lyric";
import { parseTimeToSecond } from "../../utils/lyric";
import SongImageComp from "./SongImageComp";

let frameId;
const recoverRouter = ["Song", "SongList"];
export default {
  data() {
    return {
      isUpdateSong: false, // 是否真实更新了歌曲数据
      // 有个小BUG，本来从播放页离开应该将仓库的歌曲数据清掉，但是并没有
      // 不过这么做也一样，保证了歌曲信息一定是更新的，不过还用着上一条歌的数据

      lyricArr: [], // 歌词
      currentTime: 0,
      handled: false, // 歌词是否处理过了
    };
  },
  components: {
    PlayerBar, // 播放器组件
    Lyric, // 歌词组件
    SongImageComp,
  },
  computed: {
    ...mapGetters("Song", ["songItem"]),
    ...mapState("Song", ["playSongId"]),
  },
  async created() {
    console.log(this.$route);
    const { name } = this.$route;
    let playingSongList = []; // 一个播放歌曲列表
    if (name === "Song") {
      // 播放单曲
      let {
        params: { songId },
      } = this.$route;
      songId = +songId;
      if (isNaN(songId)) {
        return;
      }
      playingSongList.push(songId);
    } else if (name === "SongFavlist") {
      // 播放歌单
      let { favlistId } = this.$route.params;
      favlistId = +favlistId;
      if (isNaN(favlistId)) {
        return;
      }
      const res = await this.$store.dispatch("Song/getSongList", {
        id: favlistId,
      });

      if (res === null) {
        this.$message({
          message: "获取数据失败",
          type: "warning",
          duration: 1500,
        });
        return;
      }
    } else if (name === "SongList") {
      const { songList } = this.$route.query;
      try {
        const newSongList = JSON.parse(songList);
        if (Array.isArray(newSongList)) {
          playingSongList = playingSongList.concat(newSongList);
        } else {
          throw new Error("songList is not array");
        }
      } catch (err) {
        console.log(err);
      }
    }

    if (recoverRouter.includes(name)) {
      const { code, data } = await this.$api.recoverySong(playingSongList);
      if (code === 200) {
        this.$store.commit("Song/setSongList", data);
      }
    }

    this.handleLyric(); // 处理歌词
  },
  mounted() {
    const getCurrentTime = () => {
      if (window.playBarAudio) {
        this.currentTime = window.playBarAudio.audioDOM.currentTime;
      }
      frameId = requestAnimationFrame(getCurrentTime);
    };
    (() => {
      requestAnimationFrame(getCurrentTime);
    })();
  },
  methods: {
    handleLyric() {
      if (this.songItem.lyric === null || this.songItem.lyric === "") {
        this.lyricArr = [];
        this.handled = true;
        return;
      }
      let lyric = this.songItem.lyric; // 获取歌词

      lyric = lyric.split(/&/).map((item) => {
        // 看有没有歌词时间，有就处理一下
        const index = item.indexOf("]");
        if (index >= 0) {
          const strs = item.split("]");
          return {
            time: parseTimeToSecond(strs[0].substring(1)),
            word: strs[1],
          };
        } else {
          // 只有歌词
          return {
            word: item,
          };
        }
      });

      this.lyricArr = lyric; // 歌词处理完成
      this.handled = true;
    },
  },
  watch: {
    songItem() {
      this.handled = false;
      this.handleLyric();
    },
  },
  beforeDestroy() {
    cancelAnimationFrame(frameId);
  },
};
</script>

<style lang="less" scoped>
.song-container {
  width: 100%;
  height: calc(100vh - 134px);
  background-color: #000;
  position: relative;

  font-family: "微软雅黑", simsun, sans-serif;
  .mark {
    width: 100%;
    height: 100%;
    min-width: 1140px;
    background: url("~@/assets/1.jpg") no-repeat;
    filter: blur(90px);
    background-size: cover;
    position: relative;
    opacity: 0.6;
    z-index: 1;
  }
  .blurBgMask {
    background-color: #292a2b;
    background-color: rgba(0, 0, 0, 0.35);
    z-index: 10;
    opacity: 0.6;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .lyric-region {
    width: 100%;
    height: 100%;
    min-width: 1140px;
    position: absolute;
    top: 0;
    left: 0;
    .lyric-wrapper {
      width: 840px;
      padding-top: 27px;
      box-sizing: border-box;
      height: 100%;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>